<template>
  <div class="drag-left-bar" v-show="!isFold">
    <div class="drag-left">
      <div class="group-box">
        <span class="group">选择节点</span>
        <el-link :underline="false" v-show="!isFold" @click="fold(true)">
          <el-icon><Fold /></el-icon>
        </el-link>
      </div>
      <div class="node-box">
        <el-anchor
          direction="horizontal"
          type="underline"
          class="node-anchor"
          :container="ContainerRef"
          :offset="70"
          @click="handleClick"
        >
          <el-anchor-link
            v-for="item in categoryGroupList"
            :key="item.code"
            :href="'#' + item.code"
            :title="item.name"
          />
        </el-anchor>
        <div ref="ContainerRef" style="height: calc(100% - 66px); overflow: auto">
          <el-collapse v-model="activeNames" class="custom-collapse group-node">
            <el-collapse-item
              v-for="item in categoryGroupList"
              :key="item.code"
              :name="item.code"
              :id="item.code"
            >
              <template #title>
                <span class="group-name">{{ item.name }}</span>
              </template>
              <div
                v-for="childrenItem in item.children"
                :key="childrenItem.code"
                @click="startDrag(childrenItem)"
                class="node-box-item"
              >
                <div v-if="childrenItem.isShow" class="node-item">
                  <img :src="childrenItem.img" />
                  <div class="children-item">{{ childrenItem.name }}</div>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </div>
  </div>
  <div class="expand-box" v-show="isFold">
    <el-link :underline="false" @click="fold(false)">
      <el-icon><Expand /></el-icon>
    </el-link>
  </div>
</template>

<script setup lang="ts" name="DragLeftBar">
import { ref } from 'vue';
import { storeToRefs } from 'pinia';
import { workFlowStoreCounter } from '@/store/work-flow';

const props = defineProps({
  startDrag: { type: Function, required: true }
});

const workFlowStore = workFlowStoreCounter();
const { categoryGroupList } = storeToRefs(workFlowStore);

const ContainerRef = ref<HTMLElement | null>(null);

const isFold = ref(false);
const activeNames = ref(categoryGroupList.value.map(item => item.code));

/**
 * 折叠
 * @param value
 */
function fold(value: boolean) {
  isFold.value = value;
}

const handleClick = (e: MouseEvent) => {
  e.preventDefault();
};
</script>

<style scoped lang="scss">
.drag-left-bar {
  width: 225px;
  background: #fcfcfd;
  box-shadow: inset -1px 0px 0px 0px rgba(42, 48, 58, 0.07);
  //overflow: auto;
  height: 100%;
  .drag-left {
    padding: 12px 16px;
    height: 100%;
  }
}
.group-box {
  display: flex;
  justify-content: space-between;
  .group {
    color: rgba(42, 48, 58, 0.8);
    font-size: 14px;
  }
}
.group-name {
  font-size: 12px;
  color: rgba(42, 48, 58, 0.4);
}

.node-item {
  background: #ffffff;
  color: #2a303a;
  font-weight: 500;
  font-size: 14px;
  //height: 40px;
  box-sizing: border-box;
  border: 1px solid rgba(42, 48, 58, 0.102);
  box-shadow: 0px 4px 10px 0px rgba(42, 48, 58, 0.05);
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  cursor: pointer;
  padding: 12px 15px;
  img {
    margin-right: 6px;
  }
}
.expand-box {
  padding: 12px;
}
.node-box {
  height: 100%;
}
.children-item {
  line-height: normal;
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
